<template>
  <u-form-item
    :label="label"
    :prop="props.data.field"
    :required="props.data.required"
  >
		<u-calendar :show="show" :closeOnClickOverlay="true" :show-confirm="false" @confirm="onChange" @cancel="show=false" @close="show=false"></u-calendar>
		<view @click="onShow">
			<u-input 
				v-model="val"
				:placeholder="props.data.placeholder"
				:readonly="true"
				:disabled="props.data.disabled"
			>
				<template #suffix><u-icon name="calendar"></u-icon></template>
			</u-input>
		</view>
	</u-form-item>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useProps } from '../hooks/props'

const props = defineProps<{ data: Record<string, any>; form: Record<string, any>; mode: string }>()
const emits = defineEmits(['valueChange'])

const show = ref(false)

const val = ref('')

const { label } = useProps(props)

const onChange = (data: any) => {
	const v = data[0]
	val.value = v
	emits('valueChange', { name: props.data.field, value: v } )
	show.value = false
}

const onShow = () => {
	if (!props.data.disabled && !props.data.readonly) {
			show.value = !show.value
	}
}

watch(
	() => props.data.defaultVal,
	() => {
		val.value = props.data.defaultVal
		if (emits) {
			emits('valueChange', { name: props.data.field, value: val.value })
		}
	},
	{ immediate: true }
)

</script>

<style lang="scss" scoped></style>
